<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/flowbite@1.8.1/dist/flowbite.min.css" />
  <!-- 添加Vue和Axios -->
  <script type="text/javascript" src="../../plugins/vue/vue.js"></script>
  <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
  <title>在线考试系统 - 管理员界面</title>
  <style>
    .sidebar-link:hover {
      transform: translateX(5px);
      transition: transform 0.3s ease;
    }
    .btn {
      transition: background-color 0.3s ease;
    }
    input:focus,
    select:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    body {
      background-color: #e0f7fa;
    }
    .sidebar {
      height: 100vh;
      width: 20%;
      background-color: #00838f;
      color: white;
      display: flex;
      flex-direction: column;
    }
    .sidebar-title {
      height: 15%;
      display: flex;
      align-items: center;
      padding: 0 1rem;
      font-size: 1.5rem;
      font-weight: bold;
    }
    .sidebar-item {
      height: 10%;
      display: flex;
      align-items: center;
      padding: 0 1rem;
      cursor: pointer;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }
    th,
    td {
      border: 1px solid #ccc;
      padding: 0.5rem;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    .main-content-page {
      height: calc(100vh - 80px);
      overflow-y: auto;
      padding: 1rem;
    }
  </style>
</head>
<body class="flex h-screen">
<div class="sidebar">
  <div class="sidebar-title">管理员端</div>
  <ul class="list-none p-0 flex flex-col flex-1">
    <li class="sidebar-item mb-2">
      <a href="#" onclick="showPage('examManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">考试管理</a>
    </li>
    <li class="sidebar-item mb-2">
      <a href="#" onclick="showPage('userManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">用户管理</a>
    </li>
    <li class="sidebar-item mb-2">
      <a href="#" onclick="showPage('paperManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">试卷管理</a>
    </li>
    <li class="sidebar-item mb-2">
      <a href="#" onclick="showPage('gradeManagement')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">成绩管理</a>
    </li>
    <li class="sidebar-item mb-2">
      <a href="#" onclick="showPage('systemSettings')" class="sidebar-link text-white hover:bg-sky-400 rounded-md px-3 py-2 block h-full flex items-center">系统设置</a>
    </li>
  </ul>
</div>

<div class="w-8/10 flex flex-col">
  <nav class="bg-sky-600 p-4 text-white w-full">
    <div class="container mx-auto flex justify-between items-center">
      <h1 class="text-2xl font-bold">在线考试系统 - 管理员界面</h1>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:text-gray-300">首页</a></li>
        <li><a href="#" class="hover:text-gray-300">系统信息</a></li>
        <li><a href="#" class="hover:text-gray-300">帮助文档</a></li>
      </ul>
    </div>
  </nav>

  <div class="p-4 flex-1">
    <!-- 用户管理页面 -->
    <div id="userManagement" class="hidden main-content-page">
      <h2 class="text-xl font-bold mb-4">用户管理页面</h2>
      <p>在此页面可进行用户信息管理、权限设置等操作。</p>

      <div v-if="loading" class="mb-4 text-gray-600">加载中...</div>
      <div v-if="error" class="mb-4 text-red-600">{{ error }}</div>
      <table class="min-w-full bg-white border border-gray-300">
        <thead>
        <tr>
          <th class="py-2 px-4 border-b">用户编号</th>
          <th class="py-2 px-4 border-b">用户名</th>
          <th class="py-2 px-4 border-b">用户角色</th>
          <th class="py-2 px-4 border-b">注册时间</th>
          <th class="py-2 px-4 border-b">班级</th>
          <th class="py-2 px-4 border-b">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" :key="user.id">
          <td class="py-2 px-4 border-b">{{ user.userid }}</td>
          <td class="py-2 px-4 border-b">{{ user.username }}</td>
          <td class="py-2 px-4 border-b">
            {{
              user.role === 2 ? '管理员' :
                      user.role === 0 ? '学生' :
                              user.role === 1 ? '教师' : '未知'
            }}
          </td>
          <td class="py-2 px-4 border-b">{{ user.createTime }}</td>
          <td class="py-2 px-4 border-b">{{ user.banji }}</td>
          <td class="py-2 px-4 border-b">
            <button @click="editUser(user)" class="text-blue-600 hover:underline">编辑</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div id="examManagement" class="hidden main-content-page">
      <!-- 原有考试管理内容 -->
    </div>
    <div id="paperManagement" class="hidden main-content-page">
      <!-- 原有试卷管理内容 -->
    </div>
    <div id="gradeManagement" class="hidden main-content-page">
      <!-- 原有成绩管理内容 -->
    </div>
    <div id="systemSettings" class="hidden main-content-page">
      <!-- 原有系统设置内容 -->
    </div>
  </div>

  <footer class="bg-sky-200 p-4 text-center text-gray-600">
    &copy; 2025 在线考试系统. All rights reserved.
  </footer>
</div>

<script>
  // 页面切换功能
  function showPage(pageId) {
    const pages = ['examManagement', 'userManagement', 'paperManagement', 'gradeManagement', 'systemSettings'];
    pages.forEach(page => {
      const element = document.getElementById(page);
      if (page === pageId) {
        element.classList.remove('hidden');
      } else {
        element.classList.add('hidden');
      }
    });
  }

  // Vue应用
  const UserManagementApp = {
    data() {
      return {
        users: [],
        loading: false,
        error: null
      }
    },
    mounted() {
      this.fetchUsers();
    },
    methods: {
      async fetchUsers() {
        this.loading = true;
        this.error = null;
        try {
          // 修改请求的后端 URL
          const response = await axios.get('http://localhost:8080/user/list');
          if (response.data.success) {
            this.users = response.data.data;
          } else {
            this.error = '数据获取失败，请稍后重试';
          }
        } catch (err) {
          console.error('数据获取失败:', err);
          this.error = '无法获取用户数据，请检查网络连接';
        } finally {
          this.loading = false;
        }
      },
      formatDate(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN');
      },
      editUser(user) {
        // 这里可以添加编辑逻辑
        console.log('编辑用户:', user);
        alert(`即将编辑用户: ${user.username}`);
      }
    }
  }

  // 创建Vue实例
  Vue.createApp(UserManagementApp).mount('#userManagement');
</script>
</body>
</html>